<template>
	<view class="filter-wrapper">
		<!-- 顶部搜索区域 -->
		<view class="search-bar">
			<view class="search-input">
				<uni-icons type="search" size="40rpx" color="#999"></uni-icons>
				<input type="text" placeholder="输入电台名称搜索" placeholder-class="placeholder" v-model="searchText" />
			</view>
			<view class="filter-btn" @click="showFilter = !showFilter" :class="{ active: showFilter }">
				<uni-icons type="settings" size="40rpx" color="#FFFFFF"></uni-icons>
			</view>
		</view>

		<!-- 筛选面板（使用过渡） -->
		<transition name="slide-fade">
			<view class="filter-panel" v-show="showFilter">
				<view class="filter-tabs">
					<view class="filter-tab" :class="{ active: currentTab === 'language' }"
						@click="currentTab = 'language'">
						语种</view>
					<view class="filter-tab" :class="{ active: currentTab === 'music' }" @click="currentTab = 'music'">
						曲风</view>
					<view class="filter-tab" :class="{ active: currentTab === 'scene' }" @click="currentTab = 'scene'">
						场景</view>
				</view>

				<scroll-view class="tag-container" scroll-x v-if="currentTab === 'language'">
					<view class="tag" v-for="(value, key, index) in LANGUAGE_TAGS" :key="'language-' + index"
						:class="{ active: selectedLanguageTag === key }" @click="selectLanguageTag(key)">
						{{ value }}
					</view>
				</scroll-view>

				<scroll-view class="tag-container" scroll-x v-if="currentTab === 'music'">
					<view class="tag" v-for="(value, key, index) in MUSIC_TAGS" :key="'music-' + index"
						:class="{ active: selectedMusicTag === key }" @click="selectMusicTag(key)">
						{{ value }}
					</view>
				</scroll-view>

				<scroll-view class="tag-container" scroll-x v-if="currentTab === 'scene'">
					<view class="tag" v-for="(value, key, index) in LISTENING_SCENES" :key="'scene-' + index"
						:class="{ active: selectedSceneTag === key }" @click="selectSceneTag(key)">
						{{ value }}
					</view>
				</scroll-view>
			</view>
		</transition>
	</view>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { debounce } from 'lodash';
import { LISTENING_SCENES, LANGUAGE_TAGS, MUSIC_TAGS, SCENE_RECOMMENDATIONS, LANGUAGE_TAG_MAP } from '@/common/const';
import { useStationStore } from '@/stores/useStationStore';
import { useRadioQueryStore } from '@/stores/useRadioQueryStore';
const searchText = ref('');
const showFilter = ref(false);
const currentTab = ref('music');
const emit = defineEmits(['tagChange']);
const stationStore = useStationStore();
const radioQueryStore = useRadioQueryStore();

const selectedLanguageTag = ref('');
const selectedMusicTag = ref('');
const selectedSceneTag = ref('');

const selectLanguageTag = (tag: string) => {
	selectedLanguageTag.value = selectedLanguageTag.value === tag ? '' : tag;
	const tags = selectedLanguageTag.value ? [tag] : null;
	emit('tagChange', { type: 'lang', tags });
}

const selectMusicTag = (tag: string) => {
	selectedSceneTag.value = '';
	selectedLanguageTag.value = '';
	selectedMusicTag.value = selectedMusicTag.value === tag ? '' : tag;
	const tags = selectedMusicTag.value ? [tag] : null;
	emit('tagChange', { type: 'music', tags });
};

const selectSceneTag = (tag: keyof typeof SCENE_RECOMMENDATIONS) => {
	selectedMusicTag.value = '';
	selectedLanguageTag.value = '';
	selectedSceneTag.value = selectedSceneTag.value === tag ? '' : tag;
	let tags = selectedSceneTag.value ? SCENE_RECOMMENDATIONS[tag] : null;
	emit('tagChange', { type: 'scene', tags });
};

const debouncedSearch = debounce((text: string) => {
	radioQueryStore.resetQuery('search', { keyword: text });
}, 300);

watch(searchText, () => { debouncedSearch(searchText.value); });

watch(selectedLanguageTag, () => {
	const key = selectedLanguageTag.value as keyof typeof LANGUAGE_TAG_MAP;
	const lang: string = LANGUAGE_TAG_MAP[key];
	radioQueryStore.resetQuery('lang', { lang: lang });
});

watch(selectedMusicTag, () => {
	const tags = selectedMusicTag.value ? [selectedMusicTag.value] : [];
	radioQueryStore.resetQuery('tags', { tags });
});

watch(selectedSceneTag, () => {
	const tags = selectedSceneTag.value ? SCENE_RECOMMENDATIONS[selectedSceneTag.value as keyof typeof SCENE_RECOMMENDATIONS] : [];
	radioQueryStore.resetQuery('tags', { tags });
});
</script>
<style>
.filter-wrapper {
	width: 100%;
}

.search-bar {
	display: flex;
	align-items: center;
	padding: 20rpx 30rpx;
	background-color: #0f1c2e;
	border-radius: 16px;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
}

.search-input {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	padding: 10rpx 20rpx;
	margin-right: 20rpx;
}

.search-input input {
	flex: 1;
	font-size: 28rpx;
	margin-right: 10rpx;
	color: #FFFFFF;
}

.placeholder {
	color: #B3B3B3;
}

.filter-btn {
	width: 80rpx;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	transition: all 0.3s ease;
}

.filter-btn:active {
	transform: scale(1.05);
	background-color: #b829f7;
}

.filter-panel {
	background-color: #0f1c2e;
	padding: 30rpx;
	margin-top: 20rpx;
	border-radius: 16px;
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.3);
}

.filter-tabs {
	display: flex;
	border-bottom: 2rpx solid rgba(255, 255, 255, 0.1);
	margin-bottom: 30rpx;
}

.filter-tab {
	flex: 1;
	text-align: center;
	padding: 20rpx 0;
	font-size: 28rpx;
	color: #B3B3B3;
	position: relative;
}

.filter-tab.active {
	color: #d502ff;
}

.filter-tab.active::after {
	content: '';
	position: absolute;
	bottom: -2rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 40rpx;
	height: 4rpx;
	background-color: #d502ff;
	border-radius: 2rpx;
}

.tag-container {
	display: flex;
	overflow-x: scroll;
	white-space: nowrap;
	scroll-snap-type: x mandatory;
	padding: 10rpx 0;
}

.tag-container::-webkit-scrollbar {
	display: none;
}

.tag {
	display: inline-block;
	margin-right: 16rpx;
	padding: 14rpx 28rpx;
	background-color: rgba(255, 255, 255, 0.08);
	border-radius: 50px;
	font-size: 26rpx;
	color: #E0E0E0;
	scroll-snap-align: start;
	transition: all 0.2s ease-in-out;
}

.tag.active {
	background-color: #d502ff;
	color: #FFFFFF;
	font-weight: bold;
	box-shadow: 0 4rpx 8rpx rgba(255, 2, 102, 0.4);
}

/* 动画 */
.slide-fade-enter-active,
.slide-fade-leave-active {
	transition: all 0.3s ease;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
	opacity: 0;
	transform: translateY(-10rpx);
}

.slide-fade-enter-to,
.slide-fade-leave-from {
	opacity: 1;
	transform: translateY(0);
}
</style>